<template>
	<view>
		<u-navbar :title="title" :autoBack="true" placeholder>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<u--form labelPosition="left" :model="model" ref="form1">
				<view style="padding: 0 32rpx;background-color: #fff;">
					<u-form-item labelWidth="80" label="收货人" borderBottom ref="name">
						<u--input placeholder="请输入收货人" v-model="model.address.name" border="none"></u--input>
					</u-form-item>
					<u-form-item labelWidth="80" label="手机号码" borderBottom ref="phone">
						<u--input type="number" placeholder="请输入手机号码" v-model="model.address.phone" border="none">
						</u--input>
					</u-form-item>
					<u-form-item labelWidth="80" label="所在地区" borderBottom ref="regionCode">
						<!-- <u--input placeholder="省市区县/乡镇等" disabled disabledColor="#ffffff"
							v-model="model.address.regionCode" border="none"></u--input> -->
						<uni-data-picker v-model="model.address.regionCode" :activeColor="appColor" placeholder="请选择所在地区" :clearIcon="false" :localdata="items" popup-title="所在地区" @change="onchange"></uni-data-picker>
					</u-form-item>
					<u-form-item labelWidth="80" label="详细地址" :borderBottom="false" ref="address">
						<u--textarea count :maxlength="50" placeholder="街道/门牌号等" v-model="model.address.address" border="none"></u--textarea>
					</u-form-item>
				</view>
				<view style="height: 32rpx;"></view>
				<view style="padding: 0 32rpx;background-color: #fff;">
					<u-form-item labelWidth="80" label="标签" borderBottom ref="tag">
						<u-radio-group v-model="model.address.tag" placement="row">
							<u-radio :activeColor="appColor" :customStyle="{marginRight: '14px'}" v-for="(item, index) in radiolist1" :key="index" :label="item.name"
								:name="item.name">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item :borderBottom="false" labelWidth="120" label="设置默认地址" ref="isDefault">
						<u-switch size="24" :activeValue="1" :inactiveValue="0" slot="right" inactiveColor="rgb(230, 230, 230)" :activeColor="appColor"
							v-model="model.address.isDefault"></u-switch>
					</u-form-item>
				</view>
			</u--form>
		</scroll-view>
		<view class="good-detail-bootom">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-r">
					<u-button :throttleTime="300" @click="save" :color="appColor" text="保存" shape="circle"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {addAddress, queryById, editAddress, getRegion} from '@/api/me.js';
	export default {
		data() {
			return {
				title: '地址',
				id: null,
				radiolist1: [{
						name: '家',
						key: 1,
						disabled: false
					},
					{
						name: '公司',
						key: 2,
						disabled: false
					},
					{
						name: '学校',
						key: 3,
						disabled: false
					}
				],
				model: {
					address: {
						name: undefined,
						phone: undefined,
						regionCode: [],
						address: '',
						tag: -1,
						isDefault: 0,
					},
				},
				items: []
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 50 + 'px';
			},
		},
		onLoad({id}) {
			// 获取地区数据
			this.getRegion();
			if(id) {
				this.id = id;
				this.title = '编辑收货地址'
				this.$cuLoading().then(res => {
					queryById({id}).then(res => {
						let {name, phone, regionCode, address, tag, isDefault} = res.result;
						let cur = this.radiolist1.find(item => item.key === Number(tag));
						if(cur) {
							tag = cur.name;
						} else {
							tag = -1;
						}
						this.model.address = {
							name,
							phone,
							regionCode,
							address,
							tag: tag,
							isDefault: Number(isDefault)
						}
					}).finally(() => {
						uni.hideLoading();
					})
				})
			} else {
				this.title = '新增收货地址'
			};
		},
		methods: {
			onchange(e) {
				this.model.address.regionCode = e.detail.value.map(item => item.value);
			},
			// 获取地区数据
			getRegion() {
				getRegion().then(res => {
					this.items = res.result
				});
			},
			save() {
				// 验证
				let {name, phone, regionCode, address, tag, isDefault} = this.model.address;
				name = uni.$u.trim(name);
				phone = uni.$u.trim(phone);
				address = uni.$u.trim(address);
				if(!uni.$u.test.rangeLength(name, [1, 30])) {
					return this.$cuTip('请输入1~30位收货人');
				}
				if(!uni.$u.test.mobile(phone)) {
					return this.$cuTip('请输入正确的手机号');
				}
				if(regionCode.length === 0) {
					return this.$cuTip('请选择所在地区');
				}
				if(!uni.$u.test.rangeLength(address, [1, 50])) {
					return this.$cuTip('请输入1~50位详细地址');
				}
				this.$cuLoading('提交中').then(() => {
					let postObj = uni.$u.deepClone(this.model.address);
					
					if(postObj.tag === -1) {
						delete postObj.tag
					} else {
						postObj.tag = this.radiolist1.find(item => item.name === postObj.tag).key;
					}
					// 新增
					if(!this.id) {
						addAddress(postObj).then(res => {
							uni.hideLoading();
							const {success} = res;
							if(success) {
								this.$cuTip('新增成功').then(() => {
									uni.hideLoading();
									uni.navigateBack({
										delta: 1
									})
								})
							} else {
								this.$cuTip('提交失败')
							}
							
						}).catch(() => {
							uni.hideLoading();
							this.$cuTip('提交失败, 请重新提交')
						})
					// 编辑
					} else {
						editAddress(Object.assign({id: this.id}, postObj)).then(res => {
							uni.hideLoading();
							const {success} = res;
							if(success) {
								this.$cuTip('修改成功').then(() => {
									uni.hideLoading();
									uni.navigateBack({
										delta: 1
									})
								})
							} else {
								this.$cuTip('修改失败')
							}
							
						}).catch(() => {
							uni.hideLoading();
							this.$cuTip('修改失败, 请重新提交')
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;

		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
</style>
